<template>
<div>
  <Header title="登录"></Header>
  <el-container>
    <el-form :model="loginForm" :rules="loginRules" ref="loginFormRef">
      <el-form-item prop="username">
        <el-input placeholder="请输入用户名" v-model="loginForm.username" prefix-icon="iconfont icon-user"></el-input>
      </el-form-item>
      <el-form-item prop="password">
        <el-input placeholder="请输入密码" v-model="loginForm.password" prefix-icon="iconfont icon-lock_fill" type="password" show-password></el-input>
      </el-form-item>

      <div class="link">
        <router-link to="/register">立即注册</router-link>
        <router-link to="/findPassword">找回密码</router-link>
      </div>
    <el-button type="primary" @click="login">登录</el-button>
    </el-form>
  </el-container>
    <Footer></Footer>
</div>
</template>

<script>
import {mapState} from 'vuex'
  import Header from "../../components/Header";
  import Footer from "../../components/Footer";
    export default {
        name: "login",
      components: {Header, Footer},
      data(){
          return {
            loginForm:{username:'',
              password:''}
          }
      },
      computed:{...mapState({loginRules: state=>state.UserRules})},
      methods:{
          login(){
            this.$refs.loginFormRef.validate(async valid=>{
                if(valid){
                  const res=await this.$http.post('/api/login/login',this.loginForm)
                  if(res.data.status!==200){this.$message.error('登录失败')
                  }else{
                    this.$message.success('登录成功')
                    this.$store.dispatch('user/Login',res.data.data.userinfo)
                    window.sessionStorage.setItem('token',res.data.data.token)
                    this.reset()
                    this.$router.push("./mine")
                  }
                }
              }
            )
          },
        reset(){
          this.$refs.loginFormRef.resetFields();
        }
      }
    }
</script>

<style scoped>
  .el-form{
    text-align: center;
  }
.el-button{
  width: 150px;
margin: 0 auto;
}
  .link{
    margin-top:5px;
    width: 100%;
    display: flex;
    justify-content: space-between;
  }
  .link a{
    margin:0 5px; font-size: 12px;
    text-decoration: none;
  }
</style>
